import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_htmlful/Div.dart';
import 'package:flutter_htmlful/Img.dart';
import 'package:flutter_htmlful/Style.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:url_launcher/url_launcher.dart';

import '../../config/configs.dart';
import '../../model/user.dart';
import 'home_second_cubit.dart';

class HomeSecondPage extends StatefulWidget {
  const HomeSecondPage({super.key});

  @override
  State<HomeSecondPage> createState() => _HomeSecondPageState();
}

class _HomeSecondPageState extends State<HomeSecondPage> {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => HomeSecondCubit(),
      child: BlocBuilder<HomeSecondCubit, HomeSecondState>(
        builder: (BuildContext context, HomeSecondState state) {
          return Div(
            body: [
              Img(
                src: 'https://cdn.pixabay.com/photo/2024/03/04/16/07/winter-8612635_1280.jpg',
                style: Style(
                  height: 250,
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
              ),
              Div(
                body: [
                  Div(
                    body: [
                      Div(
                        body: [
                          Img(
                            src: 'assets/images/img.png',
                            style: Style(
                              height: 24,
                              width: 24,
                              fit: BoxFit.fill,
                              marginBottom: 8,
                            ),
                          ),
                          const Text(
                            '编辑器2',
                            style: TextStyle(fontSize: 12),
                          )
                        ],
                        style: Style(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          border: Border.all(
                            color: const Color(0xffDEDEDE),
                            width: 1,
                          ),
                          radius: 6,
                          flexGrow: 1,
                        ),
                        inkWell: InkWell(
                          onTap: () {
                            Navigator.pushNamed(context, 'editor');
                          },
                        ),
                      ),
                      const SizedBox(width: 8),
                      Div(
                        body: [
                          Img(
                            src: 'assets/images/img.png',
                            style: Style(
                              height: 24,
                              width: 24,
                              fit: BoxFit.fill,
                              marginBottom: 8,
                            ),
                          ),
                          const Text(
                            'BBBB33',
                            style: TextStyle(fontSize: 12),
                          )
                        ],
                        style: Style(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          border: Border.all(
                            color: const Color(0xffDEDEDE),
                            width: 1,
                          ),
                          radius: 6,
                          flexGrow: 1,
                        ),
                        inkWell: InkWell(
                          onTap: () {
                            Navigator.pushNamed(context, 'markdown_editor');
                          },
                        ),
                      ),
                      const SizedBox(width: 8),
                      Div(
                        body: [
                          Img(
                            src: 'assets/images/img.png',
                            style: Style(
                              height: 24,
                              width: 24,
                              fit: BoxFit.fill,
                              marginBottom: 8,
                            ),
                          ),
                          const Text(
                            'AAA',
                            style: TextStyle(fontSize: 12),
                          )
                        ],
                        style: Style(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          border: Border.all(
                            color: const Color(0xffDEDEDE),
                            width: 1,
                          ),
                          radius: 6,
                          flexGrow: 1,
                        ),
                        inkWell: InkWell(
                          onTap: () async {
                            var fanhui = await Navigator.pushNamed(context, 'markdown_editor_web');
                            debugPrint('fanhui $fanhui');
                          },
                        ),
                      ),
                    ],
                    style: Style(
                      direction: Axis.horizontal,
                      height: 84,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      marginBottom: 16,
                    ),
                  ),
                  const Text(
                    '购买',
                    style: TextStyle(fontSize: 16),
                  ),
                  const Text(
                    '全方服务',
                    style: TextStyle(fontSize: 13, color: Color(0xff666666)),
                  ),
                  Div(
                    body: [
                      Div(
                        body: ['PDF', 'Web', 'TianShu', 'BLE', 'ccc']
                            .map(
                              (e) => Div(
                                body: [
                                  Img(
                                    src: 'assets/images/img.png',
                                    style: Style(
                                      height: 40,
                                      width: 40,
                                      fit: BoxFit.fill,
                                      radius: 1000,
                                      marginBottom: 4,
                                    ),
                                  ),
                                  Text(
                                    e,
                                    style: const TextStyle(fontSize: 12),
                                  )
                                ],
                                style: Style(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  paddingTop: 16,
                                  paddingRight: 16,
                                  paddingLeft: 16,
                                ),
                                inkWell: InkWell(
                                  onTap: () {
                                    debugPrint(e);
                                  },
                                ),
                              ),
                            )
                            .toList(),
                        style: Style(
                          direction: Axis.horizontal,
                          scrollable: true,
                        ),
                      ),
                      Div(
                        body: const [
                          Text(
                            '立即开启',
                            style: TextStyle(color: Colors.white, fontSize: 16),
                          )
                        ],
                        style: Style(
                          padding: 10,
                          mainAxisAlignment: MainAxisAlignment.center,
                          direction: Axis.horizontal,
                          radius: 1000,
                          backgroundGradient: const LinearGradient(
                            colors: [Color(0xff41A4D9), Color(0xff41A4D9), Color(0xff40EBD4)],
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                          ),
                          marginTop: 30,
                        ),
                        inkWell: InkWell(
                          onTap: () {
                            debugPrint('立即开启');
                          },
                        ),
                      )
                    ],
                    style: Style(
                      backgroundGradient: const LinearGradient(
                        colors: [Color(0xffC1E6F2), Color(0xffE4F0EF)],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                      radius: 12,
                      padding: 12,
                      marginTop: 12,
                      marginBottom: 20,
                    ),
                  ),
                  const Text(
                    '中心',
                    style: TextStyle(fontSize: 16),
                  ),
                  Div(
                    body: ['aaaaa', 'aaaaa', 'aaaaa', 'aaaaa']
                        .map(
                          (e) => Div(
                            body: [
                              Img(
                                src: 'https://cdn.pixabay.com/photo/2024/03/04/16/07/winter-8612635_1280.jpg',
                                style: Style(
                                  height: 60,
                                  width: 60,
                                  fit: BoxFit.fill,
                                ),
                              ),
                              Div(
                                body: [
                                  Text(
                                    e,
                                    style: const TextStyle(fontSize: 14),
                                  ),
                                  Text(
                                    e,
                                    style: const TextStyle(fontSize: 12, color: Color(0xff808080)),
                                  ),
                                  Text(
                                    e,
                                    style: const TextStyle(fontSize: 12, color: Color(0xff808080)),
                                  ),
                                ],
                                style: Style(
                                  flexGrow: 1,
                                  marginLeft: 8,
                                ),
                              ),
                              Div(
                                body: const Text(
                                  '联系',
                                  style: TextStyle(color: Color(0xff57A8B2)),
                                ),
                                style: Style(
                                  paddingTop: 5,
                                  paddingBottom: 5,
                                  paddingLeft: 16,
                                  paddingRight: 16,
                                  backgroundColor: const Color(0xffEDF4F5),
                                  radius: 100,
                                ),
                                inkWell: InkWell(
                                  onTap: () async {
                                    Permission.phone.request();
                                    if (await canLaunchUrl(Uri(scheme: 'tel', path: '123'))) {
                                      await launchUrl(Uri(scheme: 'tel', path: '123'));
                                    }
                                  },
                                ),
                              )
                            ],
                            style: Style(
                              paddingTop: 10,
                              paddingBottom: 10,
                              direction: Axis.horizontal,
                              crossAxisAlignment: CrossAxisAlignment.center,
                            ),
                            inkWell: InkWell(
                              onTap: () {
                                Navigator.pushNamed(context, 'chat', arguments: User(username: e, id: e));
                              },
                            ),
                          ),
                        )
                        .toList(),
                  ),
                ],
                style: Style(padding: 10),
              ),
            ],
            style: Style(
              height: double.infinity,
              width: double.infinity,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              scrollable: true,
            ),
          );
        },
      ),
    );
  }
}
